<div class="wrapper">

    {menu}

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="view-header">
                        <div class="header-title">
                            <h3 class="m-b-xs">Account</h3>
                            <small>Welcome to your account page {session[username]}! Here, you can manage your account settings, including your password and alerts.</small>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>

            {message}

            <div class="row">

                <div class="col-lg-6">
                    <div class="panel panel-filled">
                        <div class="panel-heading">Password settings</div>
                        <div class="panel-body">
                            <form class="form" method="post">
                                <input type=hidden hidden name="csrf" value="{session[csrfToken]}">
                                <div class="form-group">
                                    <label class="control-label">Current password</label>
                                    <input class="form-control" name="currentpassword" type="password">
                                </div>
                                <div class="form-group">
                                    <label class="control-label">New password</label>
                                    <input class="form-control" name="newpassword" type="password">
                                </div>
                                <div class="form-group">
                                    <label class="control-label">New password</label>
                                    <input class="form-control" name="newpassword2" type="password">
                                </div>
                                <button name="password" type="submit" class="btn">Save</button>
                            </form>
                        </div>
                    </div>

                    <div class="panel panel-filled">
                        <div class="panel-heading">2FA settings</div>
                        <div class="panel-body">
                            <form class="form" method="post">

                                {%if mfaDisabled}
                                <p>You can activate Google Authenticator 2FA for extra protection.</p>
                                <input type=hidden hidden name="csrf" value="{session[csrfToken]}">
                                <div class="form-group">
                                    <label class="control-label" for="secret">Secret code</label>
                                    <div class="input-group">
                                        <input type="text" name="secret" id="secret" value="{%data secret}"
                                            class="form-control">
                                        <span class="input-group-addon"><a data-toggle="modal" data-target="#openQRcode"
                                                style="cursor:pointer">open QR code</a></span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label" for="code">Activate with code</label>
                                    <input type="text" name="code" id="code" value="" class="form-control">
                                </div>
                                <button name="mfa" type="submit" class="btn">Save</button>
                                {%/if}

                                {%if mfaEnabled}
                                <p>You can disable Google Authenticator 2FA.</p>
                                <input type=hidden hidden name="csrf" value="{session[csrfToken]}">

                                <div class="form-group">
                                    <label class="control-label" for="code">Disable with code</label>
                                    <input type="text" name="code" id="code" value="" class="form-control">
                                </div>
                                <button name="mfa" type="submit" class="btn">Save</button>
                                {%/if}

                            </form>
                        </div>
                    </div>

                    <div class="panel panel-filled">
                        <div class="panel-heading">Logout</div>
                        <div class="panel-body">
                            <form class="form" method="post">
                                <p>Do you want to logout of your account?</p>
                                <input type=hidden hidden name="csrf" value="{session[csrfToken]}">
                                <button name="logout" type="submit" class="btn">Logout</button>
                            </form>
                        </div>
                    </div>
                </div>


                <div class="col-lg-6">

                    <div class="panel panel-filled">
                        <div class="panel-heading">Alert settings</div>
                        <div class="panel-body">
                            <form class="form" method="post">
                                <input type=hidden hidden name="csrf" value="{session[csrfToken]}">
                                <div class="form-group">
                                    <label class="control-label" for="method">How do you want to receive alerts</label>
                                    <select class="form-control" id="method" name="method">
                                        <option selected></option>
                                        <option value="1">E-mail</option>
                                        <option value="2">Telegram</option>
                                        <option value="3">Slack</option>
                                        <option value="4">Discord</option>
                                    </select>
                                </div>

                                <div id="method-pick">
                                    Pick an option

                                    {%if userIsAdmin}
                                    <br><br>These settings are only for your personal account/payloads. Go to <a
                                        href="/manage/settings">settings</a> for global alerting
                                    {%/if}
                                </div>

                                <div id="method-content-1" class="method-content">

                                    <label class="checkbox-label">
                                        <input {%checked mailOn} class="chkbox" name="mailon" type="checkbox">
                                        <span class="checkbox-custom rectangular"></span>
                                    </label>
                                    <p class="checkbox-text">Enable email alerts</p>

                                    <div class="form-group">
                                        <label class="control-label">Send mail to</label>
                                        <input type="text" name="mail" class="form-control" value="{%data email}">
                                    </div>
                                    <button name="alert" type="submit" class="btn">Save</button>

                                </div>

                                <div id="method-content-2" class="method-content">

                                    <label class="checkbox-label">
                                        <input {%checked telegramOn} class="chkbox" name="telegramon" type="checkbox">
                                        <span class="checkbox-custom rectangular"></span>
                                    </label>
                                    <p class="checkbox-text">Enable Telegram alerts</p>

                                    <div class="form-group">
                                        <label class="control-label" for="telegram_bottoken">Bot Token</label>
                                        <div class="input-group">
                                            <input class="form-control" name="telegram_bottoken" id="telegram_bottoken"
                                                placeholder="1234567890:AAbcd1234qZylg5bEzXsSjCGqro_Vb8XcM" type="text"
                                                value="{%data telegramToken}">
                                            <span class="input-group-addon"><a id="openGetChatId">Get chatID</a></span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label">Chat ID</label>
                                        <input type="text" name="chatid" id="chatid" class="form-control"
                                            placeholder="123456789" value="{%data telegramChatID}">
                                    </div>
                                    <button name="alert" type="submit" class="btn">Save</button>

                                </div>

                                <div id="method-content-3" class="method-content">

                                    <label class="checkbox-label">
                                        <input {%checked slackOn} class="chkbox" name="slackon" type="checkbox">
                                        <span class="checkbox-custom rectangular"></span>
                                    </label>
                                    <p class="checkbox-text">Enable Slack alerts</p>

                                    <div class="form-group">
                                        <label class="control-label">Webhook URL</label>
                                        <input type="text" name="slack_webhook" class="form-control"
                                            placeholder="https://hooks.slack.com/services/T00000000/B00000000/XXXX..."
                                            value="{%data slackWebhook}">
                                    </div>
                                    <button name="alert" type="submit" class="btn">Save</button>

                                </div>

                                <div id="method-content-4" class="method-content">

                                    <label class="checkbox-label">
                                        <input {%checked discordOn} class="chkbox" name="discordon" type="checkbox">
                                        <span class="checkbox-custom rectangular"></span>
                                    </label>
                                    <p class="checkbox-text">Enable Discord alerts</p>

                                    <div class="form-group">
                                        <label class="control-label">Webhook URL</label>
                                        <input type="text" name="discord_webhook" class="form-control"
                                            placeholder="https://discordapp.com/api/webhooks/1038928198292..."
                                            value="{%data discordWebhook}">
                                    </div>

                                    <button name="alert" type="submit" class="btn">Save</button>

                                </div>

                                <div id="method-disabled" class="method-content">

                                    <p>This alerting option is currently not enabled, contact your ezXSS administrator.
                                    </p>

                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
</div>

<div class="modal fade" id="openQRcode" role="dialog">
    <div class="modal-dialog" style="width:430px;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h3 class="m-b-xs">Twofactor QR code</h3>
                <small>Scan this code in your 2FA app</small>
            </div>
            <div class="modal-body">
                <img
                    src="https://chart.googleapis.com/chart?chs=400x400&chld=M|0&cht=qr&chl=otpauth://totp/ezXSS:ezXSS%3Fsecret%3D{%data secret}%26issuer%3DezXSS">
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" type="button">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="getChatId" role="dialog">
    <div class="modal-dialog" style="width:430px;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h3 class="m-b-xs">Get Telegram Chat ID</h3>
                <small>Start an chat with your bot to get chat id</small>
            </div>
            <div class="modal-body" id="getChatIdBody">
                Loading...
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" type="button">Close</button>
            </div>
        </div>
    </div>
</div>